<template>
	<view class="packer">
		<u-form-item :label="label" :prop="prop" borderBottom @click="show = true" labelWidth="100">
			<u--input v-model="state.name" :placeholder="placeholder" border="none" readonly ></u--input>
			<u-icon slot="right" name="arrow-right"></u-icon>
			<u-action-sheet :actions="actions" :show="show" @select="sheetSelectAction"></u-action-sheet>
		</u-form-item>
	</view>
</template>

<script>

	export default {
		name: 'Picker',
		props: {
			label: String,
			placeholder: String,
			value: String,
			prop: String,
			actions: Array
		},
		data() {
			return {
				show: false,
				state: {
					value: '',
					name: ''
				}
			}	
		},
		watch: {
			value(value) {
			  if(!value) {
					this.state = {
						value: '',
						name: ''
					}
				}
			}
		},
		methods: {
			sheetSelectAction(state) {
				this.state = state;
				this.$emit('input', this.state.value);
				this.show = false;
			},
		},
	}
</script>

<style>

</style>